<template>
    <div style="height: 100%;">
        <div class="left">
            <div v-for="v in $root.hadusenum" class="items"
                style="animation:linearin 500ms forwards;animation-duration:0ms ;"
                :style="load ? 'animation-duration:500ms ;' : ''" :key="v"> {{ v }}
            </div>
            <div style="text-align: center;line-height: calc(100vh - 61px);" v-if="$root.hadusenum.length == 0">
                <span style="display: inline-block;line-height: normal;">
                    <h1 style="padding: 30px 0;"> - empty - </h1>
                    暂无叫号信息
                </span>
            </div>
        </div>
        <div class="cont">
            <div class="rownum">等候人数：{{ $root.rowlist.length }}人</div>
            <div class="circles" @click="blursset">
                <div class="fixcircles" :style="flags == 1 ? 'transform:scale(6);opacity:0;' : 'transition:0ms'"></div>
                <div class="circles" style="box-shadow: none; z-index: 2;">
                    <div class="circlestips">
                        <div style="display: inline-block;line-height: normal;vertical-align: middle;"
                            :style="hadclick ? '' : 'opacity:.4'" v-if="ifshowempty == 0">
                            点击<br>叫号
                        </div>
                        <div style="display: inline-block;line-height: normal;vertical-align: middle;color:#cf2121"
                            :style="hadclick ? '' : 'opacity:.4'" v-else>
                            请先<br>排号
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            flags: 0,
            hadclick: 1,
            ifshowempty: 0,
            load: 0
        }
    },
    methods: {
        blursset() {
            if (!this.$root.rowlist.length) {
                if (this.ifshowempty == 1) {
                    return;
                }
                this.ifshowempty = 1
                setTimeout(() => {
                    this.ifshowempty = 0
                }, 2000)
                return;
            }
            if (this.hadclick == 0) {
                return
            }
            this.hadclick = 0
            //模拟请求
            if (this.flags == 0) {
                this.flags = 1
            } else {
                this.flags = 0
                setTimeout(() => {
                    this.flags = 1
                }, 10)
            }
            if (this.$root.hadusenum.length > 4) {
                this.$root.hadusenum.unshift(this.$root.rowlist[0])
                this.$root.hadusenum.splice(this.$root.hadusenum.length - 1, 1)
            } else {
                this.$root.hadusenum.unshift(this.$root.rowlist[0])
            }
            this.$root.rowlist.splice(0, 1)
            //
            setTimeout(() => {
                this.hadclick = 1
            }, 3000)
        }
    },
    mounted() {
        setTimeout(() => {
            this.load = 1
        }, 500)
    }
}
</script>

<style scoped>
.left {
    float: left;
    width: 280px;
    height: calc(100vh - 61px);
    border-right: 1px solid #ccc;
    background-color: #eee;
    box-shadow: 0 0 10px 0 #ccc;
    overflow: hidden auto;
}

.left::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 5px;
    /*高宽分别对应横竖滚动条的尺寸*/
    height: 1px;
}

.left::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 10px;
    background: #c1e2ff;
}

.left::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    border-radius: 10px;
    background: #fafafa;
}

.cont {
    position: relative;
    margin-left: 280px;
    height: calc(100vh - 61px);
    line-height: calc(100vh - 61px);
    text-align: center;
    overflow: hidden;
    background-color: lavenderblush;
}

.rownum {
    position: absolute;
    right: 20px;
    top: 20px;
    line-height: normal;
}

.circles {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    width: 200px;
    height: 200px;
    line-height: normal;
    border-radius: 50%;
    box-shadow: 0 3px 30px 0px #7fd1ec;
    background-color: white;
    cursor: pointer;
}

.fixcircles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    transform: scale(1);
    opacity: 1;
    transition: 500ms;
    background-color: skyblue;
    border-radius: 100%;
}

.circlestips {
    width: 100%;
    height: 100%;
    line-height: 200px;
    text-align: center;
    font-size: 40px;
    font-weight: 800;
    color: #7fd1ec;
}

.items {
    position: relative;
    margin: 30px;
    padding: 30px;
    left: -100%;
    border-radius: 10px;
    box-shadow: 0 0 10px 0 #ccc;
    background-color: white;
}
</style>

<style>
@keyframes linearin {
    0% {
        left: -100%
    }

    100% {
        left: 0
    }
}
</style>